<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>REPORT VIEW COMPONENT</title>
<!--meta http-equiv="X-UA-Compatible" content="IE=edge"-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../../theme/css/style_reset.css"/>
<link rel="Stylesheet" type="text/css" href="../../theme/css/comp_reportview.css"/>
<link rel="Stylesheet" type="text/css" href="../../theme/css/comp_kpi.css"/>
<script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../api/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
<script type='text/JavaScript' src='../../api/report_view.js'></script>
<!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
<script type="text/javascript">
/* IMPORTANT: REQUIRED FOR FLASH BASED REPORTS TO COMMUNICATE WITH BOI */

/************************************************************/

function setSWFIsReady(movieName) {
    //alert('ready');
    BOI.Flash.setSWFIsReady(movieName, document);
}
function rangeChangeHandler(movieName, rangeName) {
    //alert('change caught');
    BOI.Flash.rangeChangeHandler(movieName, rangeName, document);
}
/************************************************************/


var docid = undefined;
var doctype = undefined;
var homepage_loaded = false;

function removeDefaultHome(){

    // Remove the tab
    var tab = $( "#tabs" ).find( ".ui-tabs-nav li[aria-controls='tabs-1']" ).remove();
    // Find the id of the associated panel
    var panelId = tab.attr( "aria-controls" );
    // Remove the panel
    $( "#" + panelId ).remove();
    // Refresh the tabs widget
    $( "tabs" ).tabs( "refresh" );

}
window.onload = function () {

    BOI.Events.addListener(BOI.Events.loaddata, function(args){
        // this event is thrown after the swf is loaded.
        // now the report need to be loaded with actual data
        var report = BOI.getContextReport(args[0]);
        //openReport(report);
        if(report){
            BOI.openReport(report.id, report.type, undefined, true, 'rep_' + report.tech_name, true, function () {
            }, document);
        }

    });


    BOI.Events.addListener(BOI.Events.repvarchange, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);
        if (report) {
            //ensure all reports having same variables are in refresh needed state
            for (var i in report.variables) {
                for (var j in BOI.context.reports) {
                    if (BOI.context.reports[j].variables[i])
                    //
                        BOI.context.reports[j].state = BOILib.ReportStates.RefreshNeeded;
                }
            }
            //properties.current_report = report;
            setReportStateExecuted(report.id);
            openReport(report);
            $('#dialog').hide();
            showTitle();
            $('#tabs').toggle();
        }
    });
    BOI.Events.addListener(BOI.Events.varchange, function (args) { //args[0] is the varname, args[1] is value/values
        var variable = BOI.context.variables[args[0]];
        variable.value = args[1];
        for (var i in  properties.executed_reports) {
            if (i != undefined) {
                var rep = properties.executed_reports[i];
                if(rep)
                    if (rep.variables[args[0]]) //report uses this variable?
                    {
                        //reload the report
                        // BOI.openReport(rep.id, rep.type, undefined, true, rep.id);

                        // rep.variables[ args[0] ].value = args[1];

                        setReportStateExecuted(rep.id);
                        openReport(rep);
                    }
            }
        }
    });
    BOI.Events.addListener(BOI.Events.app_loaded, function (args) { //args[0] is the rep id
        var rep_name = args[0];
        if (homepage_loaded == false){
            homepage_loaded = true;
            if (typeof rep_name == 'string') {
                //var extension = rep_name.split('.').pop();
                if (rep_name.indexOf('.') >= 0) {
                    $("#tabs-1").html('<iframe  style="height:100%;"  src="' + rep_name + '" name="HOME_PG"></iframe>');
                }
                else {
                    removeDefaultHome();
                    var report = BOI.getContextReport(args[0]);
                    if (report) {
                        setReportStateExecuted(report.id);
                        // $("#tabs-1").html('<iframe name="' + report.id + '"></iframe>');
                        //openReport(report);
                        addTab(report.id, report.tech_name, report.label, report.type);
                    }
                }
            }
        }
    });

    BOI.Events.addListener(BOI.Events.full_book, function (args) { //args[0] is the rep id
        // var report = BOI.getContextReport(args[0]);
        var report = BOI.getContextReportByTitle(args[0]);
        if (report) {
            $("#bi_comment").css("display" ,"block");
            docid = report.tech_name;
            doctype = report.type;

            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type);
        }
    });

    BOI.Events.addListener(BOI.Events.repopen, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);
        if (report) {
            if((report.type == 'BO_CRYSTAL' || report.type == 'URL') && report.tech_name !="ADMIN_PAGE"){
                $("#bi_comment").css("display" ,"block");
                docid = report.tech_name;
                doctype = report.type;
            }
            else {
                $("#bi_comment").css("display" ,"none");
            }
            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type);
        }
    });
    BOI.Events.addListener(BOI.Events.favopen, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);
        if (report) {
            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type, true);
        }
    });
    BOI.Events.addListener(BOI.Events.groupopen, function (args) { //args[0] is the group id
        var report_group = BOI.getContextReport(args[0]);
        if (report_group) {
            if(report_group.type == 'BO_CRYSTAL' || report_group.type == 'URL'){
                $("#bi_comment").css("display" ,"block");
            }
            else {
                $("#bi_comment").css("display" ,"none");
            }
            setReportStateExecuted(report_group.id);
            var li = $('#tabs ul li[rep_id="' + report_group.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report_group.id, report_group.tech_name, report_group.label, report_group.type);
        }
    });

    BOI.Events.addListener(BOI.Events.resize, function (args) {
        var location = args[0];
        var max_a = $('#' + activeTab).find('[LOC="' + location + '"] a.resize');
        var title = max_a.attr('title');
        var max_img = $('#' + activeTab).find('[LOC="' + location + '"] img.min-max-img');
        if(title == "Maximize"){
            $('#' + activeTab).find('[LOC="' + location + '"] div.kpi-cover').attr('class', 'maximize');
            $('#' + activeTab).find('[LOC="' + location + '"] span.toolbar').attr('class', 'maximize-toolbar');
            max_a.attr('title', 'Minimize');
            max_img.attr('src', '../../img/icon/196.png');
        }
        else {
            $('#' + activeTab).find('[LOC="' + location + '"] div.maximize').attr('class', 'kpi-cover');
            $('#' + activeTab).find('[LOC="' + location + '"] span.maximize-toolbar').attr('class', 'toolbar');
            max_a.attr('title', 'Maximize');
            max_img.attr('src', '../../img/icon/195.png');
        }



    });
}
function init() {
    tabs = $('#tabs').tabs(
            {
                activate:function (event, ui) {
                    //activeTab = "tabs-" + (ui.newTab.index() + 1);
                    activeTab = ui.newTab.attr("aria-controls");
                    //if (ui.newTab.index() == 0) {
                    if(activeTab == 'tabs-1'){
                        $('#bi_fav_add').hide();
                        $('#bi_var_scr').hide();
                        $('#bi_comment').hide();
                        $('#dialog').hide("blind", 1000, function () {
                            $('.icon-varscreen').removeClass('icon-varscreen-active');
                        });
                        return;
                    }
                    else {
                        $('#bi_fav_add').show();
                        $('#bi_var_scr').show();
                        // $('#bi_comment').show();
                    }
                    var report = BOI.getContextReport($('#tabs li:eq(' + ui.newTab.index() + ')').attr("rep_id"));
                    checkStatusAndExecute(report);
                }
            });
    $("#tabs span.ui-icon-close").live("click", function () {

        if ($('#dialog').is(':visible') == true) {
            $('#dialog').toggle();
        }
        var report = BOI.getContextReport($(this).closest("li").attr('rep_id'));
        resetReport(report);
        var panelId = $(this).closest("li").remove().attr("aria-controls");
        $("#" + panelId).css("visibility", "hidden");
        $("#" + panelId).remove();
        limit_tabs();
        tabs.tabs("refresh");
        //tabCounter--;
    });
}

var tabs,
        tabTitle = "tabtitle",
        tabTemplate = "<li rep_id='{rep_id}'><a href='#{href}'><span>#{label}</span></a> <span class='ui-icon ui-icon-close'>x</span></li>",
        tabContentTemplate = '<iframe style="height:100%;" name="{rep_id}"></iframe>',
        tabContentTemplateDiv = '<div class="kpi_view" id="grp_{rep_id}"></div>',
        tabCounter = 2,
        activeTab = "tabs-1";
function addTab(rep_id, tech_name, rep_name, rep_type, from_favorite) {
    if (BOI.getContextReport(rep_id).OPEN_STYLE != "_BLANK") {
    var id = "tabs-" + tabCounter,
            li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, rep_name).replace(/\{rep_id\}/g, rep_id)),
            tabContentHtml = tabContentTemplate.replace(/\{rep_id\}/g, rep_id);
    if (rep_type == parent.BOILib.ReportTypes.ReportGroup)
        tabContentHtml = tabContentTemplateDiv.replace(/\{rep_id\}/g, rep_id);
    tabs.find(".ui-tabs-nav").append(li);
    tabs.find('.tab-content-inner').append("<div  id='" + id + "'>" + tabContentHtml + "</div>");
        //$("#" + id).attr('title', BOI.getContextReport(rep_id).label);
        //$('.tabs ul.tab-title').attr('title', BOI.getContextReport(rep_id).label);
    tabs.tabs("refresh");
    if (from_favorite) {
        BOI.openFavorite(BOI.favorites[rep_id], rep_id);
        var report = BOI.getContextReport(rep_id);
        report.state = BOILib.ReportStates.Current;
    }
    tabs.tabs('option', 'active', -1);
    //BOI.doc = document;
    properties.current_report.rep_id = rep_id;
    properties.current_report.rep_type = rep_type;
    tabCounter++;
    limit_tabs();
    tabs.tabs("refresh");
}
    else {
        checkStatusAndExecute(BOI.getContextReport(rep_id));
    }
}
function limit_tabs() {
    var ul_width = 0, max_width = 0, tot_width = 0, l_wid = 0, li_count = 0;
    ul_width = $('.tabs ul.tab-title').width();
    $('.tabs ul.tab-title li').each(function () {
        l_wid = $(this).width();
        tot_width = tot_width + l_wid;
        //  alert(tot_width);
        li_count++;
    });
    if (tot_width > ul_width) {
        max_width = ul_width / li_count;
        $('.tabs ul.tab-title li a').css('max-width', max_width - 60);
    }
}
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-title li').addClass('1ui-tabs-active');
    });
    $('.icon-varscreen').live('click', function () {
        // $('#dialog').slideToggle();
        if ($('.icon-varscreen').hasClass('icon-varscreen-active')) {
            //$('#dialog').show("blind", 1000, function () { $('.icon-varscreen').addClass('icon-varscreen-active'); });
        }
        else {
            //  $('#dialog').hide("blind", 1000, function () { $('.icon-varscreen').removeClass('icon-varscreen-active'); });
        }
    });
    $('.icon-reportcomment').live('click', function () {
        var title = "Foot Note";
        var vbl = BOI.getContextVariable('ZMIS_HS_DASH_MONTH');
        var period = vbl.value;
        var htmlval = '<iframe width="400" height="450"  src="../../../zbi_mis_dashbrd/bi_apps_mis_comment.htm?docid='+docid+'&type='+doctype+'&param='+period+'"> </iframe>';
        var htmlsrc = "../../../zbi_mis_dashbrd/bi_apps_mis_comment.htm?docid="+docid+'&type='+doctype+'&param='+period;
        BOILib.Util.createIFrameDialog(htmlsrc,'Foot Notes', 450, 500);
    });
</script>
<!-- COMPONENT STYLING -->
<style type="text/css">
    .kpi_view, .kpi_view div {
        height: 100%;
    }

    .kpi_view {
        position: relative;
    }

    .kpi-cover {
        width: 100%;
        height: calc(100% -23px) !important;
    }

    .kpi_view table {
        padding-bottom: 60px;
    }

    .loading {
    //   background-image: url("img/ajax-loader.gif");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .maximize-toolbar {
        position: absolute;
        top: 45px;
        left: 20px;
        top: 0px;
        left: 0px;
        padding: 5px 0px 0px 0;
        height: 18px;
        width: calc(100% -40px);
        width: 100%;
        z-index: 350;
        background-color: #d7eff6;
        box-shadow: rgba(255, 255, 255, 0.5) 15px 0px 75px inset;
        display: block;
    }

    div.maximize {
        background-color: #d7eff6;
        width: 100%;
        height: calc(100% -18px);
        z-index: 10;
        position: absolute;
        top: 18px;
        left: 0px;

    }

    .toolbar1 {
        display: block;
        width: 100%;
        height: 20px;
        opacity: 0.5;
        background-color: black;
        z-index: 200;
    }
    .varscreen-title {
        top:   23px;
        left:  21px;
        position:  absolute;
        width : 350px;
        z-index:  1;
        font-size:   16px;
        display: none;
        height: 23px;
        line-height: 24px;
        padding-right : 10px;
        padding-bottom : 0px;
        padding-left : 10px;
        border-top-left-radius : 1px;
        border-top-right-radius : 20px;
        border-bottom-left-radius : 1px;
        border-bottom-right-radius : 1px;
        border-style:solid;
        border-width:1px;
        background-color:#D7EFF6;
        border: #D7EFF6;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
    });
</script>
</head>
<body>
<div class="top-links">
    <ul>
        <li><a id="bi_comment" class="icon-reportcomment"  style="display: none; background-image: none;" href="#" >
            <img width="18" src="../../img/icon/Comments.png" style="display: block;"/></a></li>
        <li><a id="bi_var_scr" class="icon-varscreen" style="display: none;" href="#"></a></li>
        <li><a id="bi_fav_add" class="icon-favourites" style="display: none;" href="#"></a></li>
    </ul>
</div>
<!-- add for creating the title for variable screen -->
<div class="varscreen-title" title="Add the Report Name" id="var_screen_title" >
</div>
<div class="content">
    <div id="dialog" class="varscreen-container">
        <iframe id="screen_id" src="../bi_apps_comp_variable_screen.html"></iframe>
    </div>
    <div id="tabs" class="tabs">
        <ul class="tab-title">
            <li><a href="#tabs-1"><span>Home</span></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-content-inner">
                <div id="tabs-1">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>